<script setup name="ServiceHome">

import { useRouter } from 'vue-router';

// router
const router = useRouter();

const handleOpen = () => {};

const handleClose = () => {};

const handleOpenTest = () => {
  router.push({
    name: 'ServiceTest',

    query: {

    },
  });
};
</script>

<template>
  <div class="main-content">
    <h1>我是service - home</h1>

    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              :collapse="false"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><i-ep-location /></el-icon>
                  <span>测试组件</span>
                </template>
                <el-menu-item-group>
                  <template #title><span>第一个</span></template>
                  <el-menu-item index="1-1" @click="handleOpenTest"
                    >封装UI组件</el-menu-item
                  >
                  <el-menu-item index="1-2">item two</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="Group Two">
                  <el-menu-item index="1-3">item three</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                  <template #title><span>item four</span></template>
                  <el-menu-item index="1-4-1">item one</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
              <el-menu-item index="2">
                <!-- <el-icon><icon-menu /></el-icon> -->
                <template #title>Navigator Two</template>
              </el-menu-item>
              <el-menu-item index="3" disabled>
                <!-- <el-icon><document /></el-icon> -->
                <template #title>Navigator Three</template>
              </el-menu-item>
              <el-menu-item index="4">
                <!-- <el-icon><setting /></el-icon> -->
                <template #title>Navigator Four</template>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  height: 100%;
  :deep(.el-container) {
    .el-header {
      background-color: #68bde7;
    }
    .el-container {
      background: #fff;
    }
    .el-aside {
      background: #abcbff;
    }
    .el-main {
      height: 70vh;
      background: #f3f4ff;
    }
    .el-footer {
      background: #e9e9e9;
    }
  }
}
</style>
